<template>
  <div id="land-map" style="height: 230px;width: 100%" />
</template>

<script>
export default {
  name: 'LandMap',
  props: {
    device: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      map: {}
    }
  },
  watch: {
    device: {
      deep: true,
      handler() {
        this.showLocal()
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.map = new window.qq.maps.Map(document.getElementById('land-map'), {
        disableDefaultUI: true, // 禁止所有控件
        mapStyleId: 'style1'
      })
      this.showLocal()
    },
    showLocal() {
      if (this.device.lat == null) {
        return
      }
      const that = this
      const center = new window.qq.maps.LatLng(this.device.lat, this.device.lng)
      const marker = new window.qq.maps.Marker({
        position: center,
        map: this.map
      })
      const scaleSize = new window.qq.maps.Size(40, 40)
      const icon = new window.qq.maps.MarkerImage(
        that.sensor.iconUrl,
        null,
        null,
        null,
        scaleSize
      )
      this.map.zoomTo(8)
      marker.setIcon(icon)
      marker.center = center
      this.mapInfo = new window.qq.maps.InfoWindow({
        map: this.map
      })
      this.map.setCenter(marker.center)
    }
  }
}
</script>


